<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="articleList"
      bordered
      :rowKey="(item) => item.id"
      :customRow="check"
      :scroll="scroll"
    >
      <template slot="category" slot-scope="record"
        ><a-tag>{{ record }}</a-tag></template
      >
      <template slot="edit" slot-scope="record">
        <a-space>
          <a-button type="primary" @click="edit(record.id)"> 编辑 </a-button>
          <a-popconfirm
            title="确认删除该文章?"
            okText="确认"
            cancelText="取消"
            @confirm="remove(record.id)"
          >
            <a-button type="danger"> 删除 </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <a-modal
      class="model_content"
      :title="article.title"
      :dialog-style="{ top: '20px' }"
      :visible="checkArticleVisible"
      @ok="checkArticleVisible = false"
      @cancel="checkArticleVisible = false"
      cancelText="关闭"
      okText="确定"
    >
      <div v-html="article.content"></div>
      <div>
        <a-space>
          <span>点赞: {{ article.likesNum }}</span>
          <span>评论: {{ article.commentNum }}</span>
          <span>阅读: {{ article.readNum }}</span>
        </a-space>
        <p style="float: right">发布时间: {{ article.time }}</p>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  created() {
    if (document.body.clientWidth <= 1440) {
      this.scroll.x = 900;
    } else {
      this.scroll.x = 0;
    }
    const that = this;
    this.getArticleList();
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    };
  },
  // 监听屏幕宽度改变
  watch: {
    /* 监听*/
    screenWidth(val) {
      if (val <= 1440) {
        this.scroll.x = 900;
      } else {
        this.scroll.x = 0;
      }
    },
  },
  data() {
    return {
      // 滚动条的配置
      scroll: {
        x: 0,
      },
      screenWidth: document.body.clientWidth, // 屏幕宽度
      // 文章列表
      articleList: [],
      // 文章列明
      columns: [
        {
          title: "ID",
          dataIndex: "id",
        },
        {
          title: " 标题",
          dataIndex: "title",
        },
        {
          title: "发布时间",
          dataIndex: "time",
        },
        {
          title: "分类",
          dataIndex: "category",
          scopedSlots: { customRender: "category" },
        },
        {
          title: "操作",
          scopedSlots: { customRender: "edit" },
        },
      ],
      // 查看文章的显示和隐藏
      checkArticleVisible: false,
      // 查看文章的内容
      article: {},
    };
  },
  methods: {
    // 获取文章列表
    getArticleList() {
      this.$axios.get("/api/article/list.php").then((res) => {
        if (res.data.code === 1) {
          this.$message.success(res.data.msg);
          this.articleList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 查看文章详情
    check({ id }) {
      return {
        on: {
          click: (e) => {
            if (e.target.className.indexOf("ant-btn") != -1) return;
            this.$axios.post("/api/article/detail.php", { id }).then((res) => {
              if (res.data.code === 1) {
                this.article = res.data.data[0];
                this.checkArticleVisible = true;
              } else {
                this.$message.error(res.data.msg);
              }
            });
          },
        },
      };
    },

    // 编辑文章
    edit(id) {
      this.$router.push({
        name: "articleEdit",
        params: { id },
      });
    },
    // 删除文章
    remove(id) {
      this.$axios.post("/api/article/remove.php", { id }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success(res.data.msg);
          this.getArticleList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.model_content img {
  width: 200px !important;
  height: 200px !important;
}
</style>
